<template>
	<div class="top-nav-bar-com w-full h-14 flex items-center justify-between px-4">
		<nuxt-link to="/">
			<div
				title="Logo | 蓝云资源导航"
				class="logo h-full flex items-center justify-center cursor-pointer">
				<icon name="devicon:reactnavigation" :size="20" />
			</div>
		</nuxt-link>
		<div class="nav-list flex flex-wrap items-center justify-center shadow py-2 px-1">
			<nuxt-link v-for="page in pages" :to="page.path">
				<div
					class="nav-item flex items-center justify-center text-sm relative mx-4 text-blue-300"
					:class="currentPath === page.path ? 'text-blue-500' : ''">
					<icon :name="page.icon" :size="page.iconSize || 19" />
					<span class="font-bold">{{ page.name }}</span>
				</div>
			</nuxt-link>
		</div>
		<div class="setting" title="设置">
			<nuxt-link to="/setting">
				<div
					class="flex items-center justify-center text-sm text-blue-500 relative hover:text-blue-600">
					<icon name="material-symbols:settings" :size="20" />
				</div>
			</nuxt-link>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'TopNavBar',
	setup() {
		interface PageItem {
			icon: string;
			name: string;
			path: string;
			iconSize?: number;
		}

		const route = useRoute();

		const pages: PageItem[] = [
			{ name: '首页', path: '/', icon: 'ic:round-home' },
			{ name: '导航', path: '/navigation', icon: 'majesticons:paper-clip', iconSize: 16 },
		];

		const currentPath = computed<string>(() => route.path);

		return {
			pages,
			currentPath,
		};
	},
});
</script>

<style lang="scss" scoped>
.top-nav-bar-com {
	.logo {
		animation: rotate 2s linear infinite;
		filter: drop-shadow(0 0 0.75rem blue);
	}

	.nav-list {
		border-radius: 50px;
		background-color: white;
		border: 1px solid #e5e5e5;

		.nav-item {
			transition: color 0.3s;

			&::after {
				width: 0;
				content: '';
				z-index: 10;
				height: 3px;
				bottom: -1px;
				display: block;
				position: absolute;
				border-radius: 10px;
				transition: width 0.3s;
				background-color: #3b82f6;
			}

			&:hover {
				&::after {
					width: 100% !important;
					background-color: #2563eb;
				}
			}
		}
	}

	.setting {
		&:hover {
			transform: rotate(360deg);
		}
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
